<template>
  <div class="editable-wrap">
    <div>
      <el-editable
        border
        stripe
        highlight-hover-row
        highlight-current-row
        size="mini"
        ref="editable"
        :height="Data_Bind.Config.height"
        :data.sync="Data_Bind.Data"
        :edit-config="{trigger: 'click', mode: 'cell',showIcon:false}"
        @select="handleSelect"
        @sort-change="handleSortChange"
        :default-sort="{prop: Data_Bind.Config.isOrderId, order:Data_Bind.Config.orderType}"
      >
        <!-- <el-editable-column label="弹窗" width="180">
          <div slot slot-scope="scope" @click="showDialog(scope)">
            <span style="margin-left: 10px">{{ scope.row }}</span>
            <i class="el-icon-circle-plus" ></i>
          </div>
        </el-editable-column>-->
        <el-editable-column
          v-for="item in Data_Bind.Index"
          :key="item.IndexID"
          :type="item.type?item.type:null"
          :width="item.Width"
          :indexId="item.IndexName?item.IndexName:item.IndexID"
          :prop="item.IndexName ?item.IndexName:item.IndexID"
          :label="item.IndexText"
          :align="item.center?item.center:'center'"
          :fixed="item.fixed?item.fixed:null"
          :edit-render="(item.editRender && item.editRender.name !=='poupSelect') ?item.editRender:null"
          :sortable="item.sortable?item.sortable:false"
        >
          <!-- <div
            slot-scope="scope"
            v-if="true"
            v-html="formatfn(scope.row[item.IndexName],scope.row)"
          >123</div>-->
          <!-- poupSelect -->
          <div
            slot
            slot-scope="scope"
            v-if="( (item.editRender &&item.editRender.name=='poupSelect') || (!item.editRender && item.type !== 'selection' && item.type !== 'index') ) "
          >
            <div
              @click="showDialog(scope,item.IndexName)"
              v-if="item.editRender && item.editRender.name =='poupSelect'"
              style="display:flex;justify-content: space-between;align-items: center;"
            >
              <el-input style="margin-left: 10px" v-model="scope.row[item.IndexName]"></el-input>
              <i class="el-icon-circle-plus"></i>
            </div>
            <div v-if="!item.editRender" v-html="formatfn(scope.row[item.IndexName],scope)"></div>
          </div>
        </el-editable-column>
      </el-editable>
      <!-- 分页 -->
      <div
        v-if="Data_Bind.Paging.page"
        class="cina-page-wrap"
        style="height:initial; margin:8px 0; padding:6px 15px;"
      >
        <div class="cina-page" style="text-align:right;">
          <el-pagination
            @current-change="TablePagingFn"
            @size-change="pageSizeChangeFn"
            :current-page="Data_Bind.Paging.Index"
            :page-size="Data_Bind.Paging.Size"
            :page-sizes="[10, 15, 30, 50]"
            :page-count="Data_Bind.Paging.Count"
            :pager-count="7"
            :total="Data_Bind.Paging.RecordCount"
            :disabled="Data_Bind.Paging.Disabled"
            background
            :small="Data_Bind.Paging.pageType == 'mini'?true:false"
            :layout="Data_Bind.Paging.pageType == 'mini'?'total, prev, pager, next':'total, sizes, prev, pager, next, jumper'"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/api/request";
export default {
  props: { formatfn: [Function] },
  data () {
    return {
      name: 'OptTable',
      Data_Bind: {//表格绑定数据
        Config: { type: "", isOrderId: "", orderType: "" },
        Index: [], Data: [],
        Paging: { page: true, Index: 0, Size: 0, Count: 0, RecordCount: 0, Disabled: false }
      },
      opt: {
        url: '',
        param: {},
        params: { name: 'cc', pageSize: 10, pageIndex: 1, isOrderId: 'date', orderType: 'ascending' },
        Config: {
          type: 'multiple',
          isOrderId: "date",
          orderType: "ascending"
        }
      }
    };
  },
  watch: {
  },
  created () {
  },
  methods: {
    //初始化
    load (url, param, pageNo, rowNum) {
      let page_url = url;
      this.opt.url = page_url;
      if (page_url.indexOf("?") < 0) {
        page_url = page_url + "?"
      }
      if (pageNo) {
        this.opt.params.pageIndex = pageNo;
        page_url = page_url + "pageNumber=" + pageNo;
      }
      let pageSize = 0;
      if (this.Data_Bind.Paging.page) {
        if (rowNum) {
          this.opt.params.pageSize = rowNum;
        }
        pageSize = this.opt.params.pageSize
      }
      page_url = page_url + "&pageSize=" + pageSize;
      this.opt.param = param;
      this.SetDefaultInfo(this.opt);
      this.getTableData(page_url, this.opt.param);

    },
    //获取表格数据
    getTableData (url, param) {
      console.log(url)
      // request({
      //   url: url,
      //   method: "get",
      //   params: param
      // }).then(res => {
      //   this.Data_Bind.Data = res.data;//后台返回表格数据
      //   this.Data_Bind.Paging.Count = res.pageCount; //总页数
      //   this.Data_Bind.Paging.Size = res.pageSize;//每页几条
      //   this.Data_Bind.Paging.RecordCount = res.pageRecordCount;//总条数
      // });
      //假数据-----------------------
      var res = {
        data: [{ date: '2016-05-03', data1: '自定义', name: '11111', address: '假数据address', test: "假数据test", options: '1', num: "666", ElCascader: '1', ElSwitch: true },
        { date: '2016-05-02', data1: '自定义', name: '22222', address: '假数据address', test: "假数据test", options: "2", num: "666", ElCascader: '1', ElSwitch: true },
        { date: '2016-05-02', data1: '自定义', name: '33333', address: '假数据address', test: "假数据test", options: "3", num: "666", ElCascader: '1', ElSwitch: true },
        { date: '2016-05-02', data1: '自定义', name: '44444', address: '假数据address', test: "假数据test", options: "4", num: "666", ElCascader: '1', ElSwitch: true },
        { date: '2016-05-02', data1: '自定义', name: '55555', address: '假数据address', test: "假数据test", options: "1", num: "666", ElCascader: '1', ElSwitch: true },
        ],
        pageCount: 20,
        pageSize: 10,
        pageRecordCount: 101
      }
      var data = res.data.sort(function (a, b) { return Math.random() > .5 ? -1 : 1; });;//乱序
      for (var i = data.length; i < this.opt.params.pageSize; i++) {
        data.push({ date: '2016-05-02', data1: '自定义', name: '假数据Name', address: '假数据address', test: "假数据test", options: "2", num: "666", ElCascader: '1', ElSwitch: true })
      }
      //假数据-----------------------
      this.Data_Bind.Data = data;//后台返回表格数据
      this.Data_Bind.Paging.Count = res.pageCount; //总页数
      this.Data_Bind.Paging.Size = res.pageSize;//每页几条
      this.Data_Bind.Paging.RecordCount = res.pageRecordCount;//总条数
    },
    SetColumn (column, tableOpt) {
      this.Data_Bind.Index = column;
      console.log(column)
      if (tableOpt.page == false) {
        this.Data_Bind.Paging.page = tableOpt.page;
      }else{
        this.Data_Bind.Paging.pageType = tableOpt.pageType;
      }
      Object.assign(this.Data_Bind.Config, tableOpt);
    },
    //设置默认数据
    SetDefaultInfo (opt) {
      this.Data_Bind.Config.type = opt.Config.type;
      this.Data_Bind.Config.isOrderId = opt.Config.isOrderId;
      this.Data_Bind.Config.orderType = opt.Config.orderType;
      //   this.Data_Bind = {
      //   Config: { type: "", isOrderId: "", orderType:"ascending" },
      //   Index: [], Data: [],
      //   Paging: { Index: 0, Size: 0, Count: 0, RecordCount: 0 }
      // };
    },
    handleSelect (selection, row) {
      if (this.opt.Config.type == 'multiple') {
        //多选
        this.$emit("handleSelect", selection);
      } else {
        //处理单选
        this.$refs.editable.clearSelection();
        this.$refs.editable.toggleRowSelection(row, true)
        this.$emit("handleSelect", row);
      }
    },
    //排序改变回调
    handleSortChange (res) {
      console.log(res)
      var opt = this.opt;
      opt.params.isOrderId = res.prop;//根据什么字段排序
      opt.params.orderType = res.order;//升序还是降序
      this.load(opt.url, opt.param);
    },
    //分页事件
    TablePagingFn (pagingIndex) {
      var opt = this.opt;
      opt.params.pageIndex = pagingIndex;
      //改变页数，请求数据
      this.load(opt.url, opt.param, pagingIndex);
    },
    //改变每页展示条数回调事件
    pageSizeChangeFn (val) {
      this.Data_Bind.Paging.Size = val;
      var opt = this.opt;
      opt.params.pageSize = val;
      opt.params.pageIndex = 1;
      this.load(opt.url, opt.param, 1, val);
    },
    //
    showDialog (scope, IndexName) {
      // console.log(scope);
      this.$emit("showDialog", scope, IndexName);
    },
    changeData (index, indexName, newValue) {
      this.Data_Bind.Data[index][indexName] = newValue;
    },
    getData () {
      return this.Data_Bind.Data;
    }
  }
}
</script>
<style lang="scss" scoped>
// /deep/ 用来穿透样式
.editable-wrap {
  /deep/ .el-pagination__total {
    float: left;
  }
  /deep/ .el-pagination__sizes {
    float: left;
  }
  /deep/ .el-table--border th {
    background: #f6f6f6;
    font-weight: 500;
    height: 36px;
  }
  /deep/ .el-table th > .cell {
    color: #5097d5;
  }
  /deep/ .el-table td {
    height: 30px !important;
  }
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .btn-next {
    background: none;
  }
}
</style>
